<template>
	<!-- <fullscreen :fullscreen.sync="fullscreen"> -->
	<div style="height: 100%;">
		<div style="height: 100%;" v-show="!showtip">
			<div class="container" v-show="fullscreen">
				<div class="msgInfo">
					<el-aside class="sidePosi">
						<div style="height: 120px;z-index: 999;">
							<el-button class="studentforn" @click="shwostudent = !shwostudent">考生信息</el-button>
							<el-card class="box-card" v-show="shwostudent">
								<div class="img">
									<img src="./daifu.png" />
								</div>
								<div>
									姓名：
									<span
										style="color: #909399"
										v-if="studentMsg.nickName !== null"
									>{{ studentMsg.nickName }}</span>
									<span style="color: #909399" v-else>暂无</span>
								</div>
								<div>
									学号：
									<span
										style="color: #909399"
										v-if="studentMsg.studentNumber !== null"
									>{{ studentMsg.studentNumber }}</span>
									<span style="color: #909399" v-else>暂无</span>
								</div>
								<div>
									班级名称：
									<span
										style="color: #909399"
										v-if="studentMsg.className !== null"
									>{{ studentMsg.className }}</span>
									<span style="color: #909399" v-else>暂无</span>
								</div>
								<div>
									专业名称：
									<span
										style="color: #909399"
										v-if="studentMsg.majorName !== null"
									>{{ studentMsg.majorName }}</span>
									<span style="color: #909399" v-else>暂无</span>
								</div>
								<div>
									学院名称：
									<span
										style="color: #909399"
										v-if="studentMsg.collegeName !== null"
									>{{ studentMsg.collegeName }}</span>
									<span style="color: #909399" v-else>暂无</span>
								</div>
							</el-card>
							<div class="timeclick">
								<span class="spantime">
									<i class="el-icon-bell"></i>
									{{ time }}
								</span>
							</div>
						</div>
						<el-menu
							default-active="2"
							:unique-opened="true"
							class="el-menu-vertical-demo"
							@open="handleOpen"
							@close="handleClose"
							@select="chosemue"
						>
							<el-submenu :index="item.index + ''" v-for="(item, i) in paper.structureList" :key="i">
								<template slot="title">
									<div class="menu_list">{{ item.name }}</div>
								</template>
								<!-- 循环生成菜单 -->
								<el-menu-item
									:index="item.index + '-' + item1.index"
									v-for="(item1, i1) in item.bankList"
									:key="i1"
								>
									<span v-if="item1.tag===0" class="menu">{{ item.type }}--第{{ i1 + 1 }}题</span>
									<span v-else class="menu tagChoice">{{ item.type }}--第{{ i1 + 1 }}题</span>

									<!-- <span>{{item1.tag}}</span> -->

									<!-- {{ item.type}}--第{{i1+1}}题 -->
								</el-menu-item>
							</el-submenu>
						</el-menu>
					</el-aside>
					<div class="subbutton">
						<el-button type="danger" @click="submitanswer()">交卷</el-button>
						<el-button type="success" @click="answercard()">答题卡</el-button>
					</div>
				</div>

				<div class="msgInfo_page">
					<el-container style="width='100%';width='100%'">
						<!-- <el-header class="el-header">
              <el-breadcrumb
                separator-class="el-icon-arrow-right"
                class="header"
              >
                <el-breadcrumb-item
                  >part{{ breadcrumb.first }}--{{
                    breadcrumb.type
                  }}</el-breadcrumb-item
                >
                <el-breadcrumb-item
                  >第{{ breadcrumb.second }}题</el-breadcrumb-item
                >
              </el-breadcrumb>
						</el-header>-->
						<el-main width="100%">
							<!-- 题目 -->
							<ShowPaper @fahandleTag="fahandleTag" :paper="paper" :row="templatepape" v-if="shwopaper" />
						</el-main>
					</el-container>
				</div>
			</div>
			<el-dialog
				:visible.sync="answercardDialogVisible"
				:modal="true"
				width="70%"
				center
				append-to-body
				class="datika-dialog"
			>
				<div>
					<div class="ansekahead">
						<!-- 贵州中医大学2019-2020年第一学期《公共关系补考》 -->
						{{ paper.name }}
					</div>
					<div class="studentmsg">
						<div class="studentmsg-ietm">
							<div>
								<span class="tips">考生姓名：</span>
								{{ studentMsg.nickName }}
								<span v-if="studentMsg.nickName == null">暂无</span>
							</div>
							<div>
								<span class="tips">学号：</span>
								{{ studentMsg.studentNumber }}
								<span v-if="studentMsg.studentNumber == null">暂无</span>
							</div>
							<div>
								<span class="tips">学院名称：</span>
								{{ studentMsg.collegeName
								}}
								<span v-if="studentMsg.collegeName == null">暂无</span>
							</div>
							<div>
								<span class="tips">专业名称：</span>
								{{ studentMsg.majorName }}
								<span v-if="studentMsg.majorName == null">暂无</span>
							</div>
							<div>
								<span class="tips">班级名称：</span>
								{{ studentMsg.className }}
								<span v-if="studentMsg.className == null">暂无</span>
							</div>
						</div>
						<div style="padding: 10px 10px">
							正确填涂：
							<span style="background-color: #67c23a">[选项]</span>
						</div>
					</div>
					<div class="ansekahead-answer">
						<div class="studentmsg" v-for="(item, i) in paper.structureList" :key="i">
							<span
								style="display: block; padding: 10px; background-color: #dcdfe6"
							>part{{ i + 1 }}--{{ item.name }}</span>
							<!-- 单项选择题 -->
							<div class="ansekahead-chose" v-if="item.beanName == 'singleChoiceServiceImpl'">
								<div class="quest" v-for="(item1, i1) in item.bankList" :key="i1">
									<span class="quest_span">{{ i1 + 1 }}.</span>

									<span
										v-for="(item2, i3) in item1.options"
										:key="i3"
										:class="
                        item1.examAnswer.optiones == String.fromCharCode(i3 + 65)
                          ? 'quest-item-right'
                          : 'quest-item'
                      "
									>{{ String.fromCharCode(i3 + 65) }}</span>
								</div>
							</div>
							<!-- 多项选择题 -->
							<div class="ansekahead-chose" v-if="item.beanName == 'multipleChoiceServiceImpl'">
								<div class="quest" v-for="(item1, i1) in item.bankList" :key="i1">
									<span class="quest_span">{{ i1 + 1 }}.</span>
									<span
										v-for="(itemd, kk) in item1.options"
										:key="kk"
										:class="itemd.flag ? 'quest-item-right' : 'quest-item'"
									>{{ String.fromCharCode(kk + 65) }}</span>
								</div>
							</div>
							<!-- 填空题 -->
							<div class="ansekahead-chose" v-if="item.beanName == 'completionServiceImpl'">
								<div class="bankquest" v-for="(item1, i1) in item.bankList" :key="i1">
									<span class="bankquest_span">
										{{ i1 + 1 }}.
										<span
											v-for="(itemd, kk) in item1.examAnswer.value"
											:key="kk"
										>（{{ kk + 1 }}）{{ itemd }}</span>
									</span>
								</div>
							</div>
							<!-- 选词填空题 -->
							<div class="ansekahead-chose" v-if="item.beanName == 'bankedClozeServiceImpl'">
								<div class="bankquest_choice" v-for="(item1, i1) in item.bankList" :key="i1">
									<div class="bankquest_span_choice">
										{{ i1 + 1 }}.
										<div
											v-for="(itemd, kk) in item1.examAnswer.value"
											:key="kk"
											style="height: 40px;"
										>（{{ kk + 1 }}）{{ itemd }}</div>
									</div>
								</div>
							</div>
							<!-- 判断题 -->
							<div class="ansekahead-chose" v-if="item.beanName == 'judgeServiceImpl'">
								<div class="quest" v-for="(item1, i1) in item.bankList" :key="i1">
									<div class="quest_span">
										{{ i1 + 1 }}.
										<el-radio-group
											class="oneselect-body"
											style="margin-top: -3px"
											v-model="item1.examAnswer.optiones"
											disabled
										>
											<el-radio label="true">正确</el-radio>
											<el-radio label="false">错误</el-radio>
										</el-radio-group>
									</div>
								</div>
							</div>
							<!-- 简答题 -->
							<div class="ansekahead-chose" v-if="item.beanName == 'shortAnswerServiceImpl'">
								<div class="quest" style="width: 100%" v-for="(item1, i1) in item.bankList" :key="i1">
									<span
										style="
                        display: block;
                        text-align: center;
                        padding: 10px 0;
                        font-weight: 600;
                        margin-right: 20px;
                        margin-left: 5px;
                      "
										v-html="item1.examAnswer.value"
									></span>
									<!-- {{ i1 + 1 }}.{{ item1.examAnswer.value }} -->
								</div>
							</div>

							<!-- 大题 -->
							<div class="bigansekahead-chose" v-if="item.beanName == 'bigQuestionServiceImpl'">
								<!-- 两层嵌套，然后用框包裹整个题目 -->
								<div
									v-for="(temobj, temk) in item.bankList"
									:key="temk"
									style="display: flex; overflow: hidden;width: 100%; margin-bottom:10px;padding:0 5px;"
								>
									<div class="f1">
										<span
											style="
                        display: block;
                        text-align: center;
                        line-height: 40px;
                        height: 40px;
                        font-weight: 600;
                        margin-left: 5px;
                        margin-top: 20px;
                      "
										>{{ temk + 1 }}.</span>
									</div>
									<div class="f2" style="flex: 1;display:flex;flex-wrap:wrap">
										<div class="ansekahead-chose" v-for="(obj, k) in temobj.bankList" :key="k">
											<div v-if="obj.beanName == 'singleChoiceServiceImpl'" style="display: flex;">
												<span
													style="
                            display: block;
                            text-align: center;
                            line-height: 40px;
                            height: 40px;
                            font-weight: 600;
                            margin-right: 0px;
                            margin-left: 5px;
                          "
												>({{ k + 1 }})</span>
												<span
													v-for="(item2, i3) in obj.options"
													:key="i3"
													:class="
                            obj.examAnswer.optiones ==
                            String.fromCharCode(i3 + 65)
                              ? 'quest-item-right'
                              : 'quest-item'
                          "
												>{{ String.fromCharCode(i3 + 65) }}</span>
											</div>

											<div v-if="obj.beanName == 'multipleChoiceServiceImpl'" style="display: flex">
												<span
													style="
                            display: block;
                            text-align: center;
                            line-height: 40px;
                            height: 40px;
                            font-weight: 600;
                            margin-right: 20px;
                            margin-left: 5px;
                          "
												>（{{ k + 1 }}）</span>
												<!-- 这里报错要重写 -->
												<span
													v-for="(itemd, kk) in obj.options"
													:key="kk"
													:class="
                            obj.examAnswer.optiones == null ||
                            obj.examAnswer.optiones.indexOf(
                              String.fromCharCode(kk + 65)
                            ) == -1
                              ? 'quest-item'
                              : 'quest-item-right'
                          "
												>{{ String.fromCharCode(kk + 65) }}</span>
											</div>
											<div v-if="obj.beanName == 'completionServiceImpl'">
												<span
													style="
                            display: block;
                            text-align: center;
                            line-height: 40px;
                            height: 40px;
                            font-weight: 600;
                            margin-right: 20px;
                            margin-left: 5px;
                            vertical-align: bottom;
                          "
												>
													（{{ k + 1 }}）
													<span
														v-for="(itemd, kk) in obj.examAnswer.value"
														:key="kk"
														style="
                              margin-left: 10px;
                              border-bottom: 2px solid #dcdfe6;
                            "
													>{{ itemd }}</span>
												</span>
											</div>

											<div v-if="obj.beanName == 'shortAnswerServiceImpl'">
												<span
													style="
                            display: block;
                            text-align: center;
                            padding: 10px 0;
                            font-weight: 600;
                            margin-right: 20px;
                            margin-left: 5px;
                          "
												>（{{ k + 1 }}）{{ obj.examAnswer.value }}</span>
											</div>
											<div v-if="obj.beanName == 'judgeServiceImpl'">
												<span
													style="
                            display: block;
                            text-align: center;
                            line-height: 40px;
                            height: 40px;
                            font-weight: 600;
                            margin-right: 20px;
                            margin-left: 5px;
                            vertical-align: bottom;
                          "
												>
													（{{ k + 1 }}）
													<el-radio-group
														class="oneselect-body"
														style="margin-top: -3px"
														v-model="obj.examAnswer.optiones"
														disabled
													>
														<el-radio label="true">正确</el-radio>
														<el-radio label="false">错误</el-radio>
													</el-radio-group>
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
				</span>-->
			</el-dialog>
			<!-- //交卷提示 -->
			<el-dialog :visible.sync="exitDialogVisible" :modal="true" width="30%" append-to-body center>
				<div style="font-weight: 600; font-size: 20px; margin-bottom: 10px">确认提交试卷</div>
				<div>
					<el-button @click="exitDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="reasubpaper()">确 定</el-button>
				</div>
			</el-dialog>
		</div>

		<div class="first-tips" style="text-align: center" v-show="showtip">
			<div style="font-size: 24px; font-weight: 600">
				<span>考试前请先检查电脑的输入和输出设备</span>
			</div>
			<div style="font-size: 80px; margin-top: 20px">
				<i class="el-icon-edit" style="margin-right: 20px"></i>
				<i class="el-icon-service"></i>
			</div>
			<div>
				<el-button type="primary" class="button" @click="toggle()">开始考试</el-button>
			</div>
		</div>
	</div>
	<!-- </fullscreen> -->
</template>

<script>
import fullscreen from 'vue-fullscreen'
// 引入试卷
import ShowPaper from './showPaper.vue'
import Vue from 'vue'
import { getExamPaper } from '@/api/paper/paper.js'
import { postAnswer } from '@/api/examination/examination.js'
Vue.use(fullscreen)

export default {
	components: { ShowPaper },
	name: 'exam',
	//接收
	props: {
		row: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},
	data() {
		// const item = {
		// 	date: '2016-05-02',
		// 	name: '王小虎',
		// 	address: '上海市普陀区金沙江路 1518 弄',
		// }
		return {
			exitDialogVisible: false, //交卷提示
			studentMsg: [], //学生信息
			time: '24:00:00',
			answercardDialogVisible: false,
			answercardtitle: '',
			templatetiem: '',
			timeout: 0,
			timer: undefined, // 计时器，作用：组件销毁的时候需要把定时器清除
			shwostudent: false,
			shwopaper: false,
			showtip: true,
			fullscreen: false,
			// tableData: Array(20).fill(item),
			breadcrumb: {
				first: '',
				second: '',
				// type:paper.structureList[0].type
				type: '',
			},
			headmue: {
				first: '',
				second: '',
			},
			//答题试卷组件的传值
			templatepape: [],
			//   题库
			paper: [],
		}
	},
	created() {
		window.onresize = () => {
			if (!this.checkFull()) {
				// 退出全屏后要执行的动作
				this.$emit('ok', '子组件交卷')
				this.fullscreen = false
				this.shwopaper = false
				this.answercardDialogVisible = false
			}
		}
	},
	mounted() {
		let tiem = Date.parse(this.row.sessionEndTime) - Date.parse(this.row.currTime) // 获取时间差
		this.templatetiem = tiem / 1000 //时间戳转化为秒
		setTimeout(() => {
			this.start() //倒计时
		}, 1000)
	},
	methods: {
		// 是否全屏并按键ESC键的方法
		checkFull() {
			//判断浏览器是否处于全屏状态 （需要考虑兼容问题）
			var isFull =
				document.mozFullScreen ||
				document.fullScreen ||
				//谷歌浏览器及Webkit内核浏览器
				document.webkitIsFullScreen ||
				document.webkitRequestFullScreen ||
				document.mozRequestFullScreen ||
				document.msFullscreenEnabled
			if (isFull === undefined) {
				isFull = false
			}
			return isFull
		},
		//  获取试卷详情
		getpaperdetail() {},
		//是否全屏 开始考试按钮
		toggle() {
			// console.log("toggle");
			// this.templatepape = this.row;
			this.getpaperdetail()
			getExamPaper({
				examineeId: this.row.examineeId,
				sessionId: this.row.sessionId,
				paperId: this.row.paperId,
			}).then((res) => {
				this.tagPaperdata(res)
				this.templatepape = res
				this.studentMsg = res.examinee
				// this.templatepape = res;
				for (let i = 0; i < res.paper.structureList.length; i++) {
					res.paper.structureList[i].index = i + 1
					//处理大题内部的填空题
					if (res.paper.structureList[i].beanName == 'bigQuestionServiceImpl') {
						for (
							let j = 0;
							res.paper.structureList[i].bankList[0].bankList !== null &&
							j < res.paper.structureList[i].bankList[0].bankList.length;
							j++
						) {
							if (
								res.paper.structureList[i].bankList[0].bankList[j] !== null &&
								res.paper.structureList[i].bankList[0].bankList[j].beanName ==
									'completionServiceImpl'
							) {
								if (
									res.paper.structureList[i].bankList[0].bankList[j] !== null &&
									res.paper.structureList[i].bankList[0].bankList[j].examAnswer.value != null
								) {
									res.paper.structureList[i].bankList[0].bankList[j].examAnswer.value =
										res.paper.structureList[i].bankList[0].bankList[j].examAnswer.value.split('^^')
								}
							}
						}
					} else if (res.paper.structureList[i].beanName == 'multipleChoiceServiceImpl') {
						res.paper.structureList[i] = this.regMuch(res.paper.structureList[i])
					} else if (res.paper.structureList[i].beanName == 'completionServiceImpl') {
						res.paper.structureList[i] = this.regbank(res.paper.structureList[i])
					}
					for (
						let k = 0;
						res.paper.structureList[i].bankList !== null &&
						k < res.paper.structureList[i].bankList.length;
						k++
					) {
						Vue.set(res.paper.structureList[i].bankList[k], 'index', k + 1)
						// res.paper.structureList[i].bankList[k].index = k + 1;
					}
				}
				this.paper = res.paper
				setTimeout(() => {
					this.fullscreen = true
					this.shwopaper = true
					this.showtip = false
				}, 200)
			})
			// setTimeout(() => {
			//   this.fullscreen = true;
			//   this.shwopaper = true;
			//   this.showtip = false;
			// }, 1000);
		},
		// 初始化收藏题目
		tagPaperdata(obj) {
			console.log('tagPaperdata')
			console.log('obj: ', obj.paper.structureList)
			console.log(obj.paper.structureList.length)
			let length1 = obj.paper.structureList.length
			for (let i = 0; i < length1; i++) {
				if (obj.paper.structureList[i].bankList !== null) {
					let length2 = obj.paper.structureList[i].bankList.length
					for (let j = 0; j < length2; j++) {
						Vue.set(obj.paper.structureList[i].bankList[j], 'tag', 0)
					}
				}
			}
			console.log('obj**********: ', obj.paper.structureList)
		},
		// 收藏题目的更改
		fahandleTag(tagData) {
			console.log('tagData:', tagData)
			let total = tagData[0]
			let i = tagData[1]
			if (this.paper.structureList[total].bankList[i].tag === 0) {
				Vue.set(this.paper.structureList[total].bankList[i], 'tag', 1)
			} else {
				Vue.set(this.paper.structureList[total].bankList[i], 'tag', 0)
			}
			console.log('父组件中更改后的值： ', this.paper.structureList[total].bankList[i].tag)
		},
		//交卷提示
		submitanswer() {
			this.exitDialogVisible = true
			//  this.$confirm(
			//   '是否确认提交试卷"',
			//   "警告",
			//   {
			//     confirmButtonText: "确定",
			//     cancelButtonText: "取消",
			//     type: "warning",
			//   }
			// )
			//   .then(() => {
			//     postAnswer({examineeId:this.row.examineeId}).then(res => {
			//     this.$emit("ok", "子组件交卷");
			//     this.fullscreen=false
			//     this.shwopaper=false
			//     this.answercardDialogVisible=false
			//   })
			//   })
			//   .catch(() => {});

			//交卷退出全屏
		},
		// 交卷
		reasubpaper() {
			postAnswer({ examineeId: this.row.examineeId }).then((res) => {
				this.$emit('ok', '子组件交卷')
				this.exitDialogVisible = false
				this.fullscreen = false
				this.showtip = false
				this.shwopaper = false
				this.answercardDialogVisible = false
			})
		},

		//答题卡
		answercard() {
			this.answercardDialogVisible = true
			this.getExamPaperInfo()
		},
		//点击摸一个菜单
		chosemue(index, indexPath) {
			// console.log("chosemue----------------------: ",index,indexPath);
			let data = indexPath[1].split('-')
			// console.log("data: -------",data);
			// let arr = this.paper.structureList[index[0]-1].bankList[index[2]-1].id;
			let arr = this.paper.structureList[index[0] - 1].bankList[parseInt(data[1] - 1)].id
			// console.log("arr: ",arr);
			// console.log("index: ",index[0]);
			document.querySelector('#a' + arr).scrollIntoView(true)
			this.breadcrumb.first = indexPath[0]
			this.breadcrumb.type = this.paper.structureList[index[0] - 1].type
			this.breadcrumb.second = indexPath[1]
		},
		//打开导航栏
		handleOpen(key, keyPath) {},
		//关闭导航栏
		handleClose(key, keyPath) {},

		//倒计时处理
		countDown() {
			// let tiem =Date.parse(this.row.sessionEndTime) -Date.parse(this.row.currTime) ; // 获取时间差
			// this.templatetiem =tiem/1000//时间戳转化为秒
			// 中间注释部分是提交答案的接口

			this.templatetiem = this.templatetiem - 1
			//倒计时自动交卷
			if (this.templatetiem <= 0) {
				this.submitanswer()
				//调用父组件关闭diaolog
			}

			// let hour = now.getHours(); // 时
			// let min = now.getMinutes(); // 分
			// let sec = now.getSeconds(); // 秒
			// let result = ''; // 返回结果
			// let h = 24 - hour; // 一天中剩下的时间(小时)
			// if (min > 0 || sec > 0) {
			//     h -= 1
			// }
			// let m = 60 - min; // 一天中剩下的时间(分钟)
			// if (sec > 0) {
			//     m -= 1
			// }
			// if (m == 60) {
			//     m = 0
			// }
			// let s = 60 - sec; // 一天中剩下的时间(秒)
			// if (s == 60) {
			//     s = 0
			// }
			let nowtime = this.templatetiem
			let day = parseInt(nowtime / 60 / 60 / 24) <= 1 ? '' : parseInt(nowtime / 60 / 60 / 24) //天
			let h = parseInt((nowtime / 60 / 60) % 24) // 时
			let m = parseInt((nowtime / 60) % 60) // 分
			let s = parseInt(nowtime % 60) // 秒
			let result = '' // 返回结果
			day = day.toString()
			h = h.toString()
			m = m.toString()
			s = s.toString()
			if (day.length == 1) {
				// 补0
				day = '0' + day
			}
			if (h.length == 1) {
				// 补0
				h = '0' + h
			}
			if (m.length == 1) {
				// 补0
				m = '0' + m
			}
			if (s.length == 1)
				// 补0
				s = '0' + s
			result = h + ':' + m + ':' + s
			return result
		},
		start() {
			let that = this
			this.timer = setInterval(function () {
				that.time = that.countDown()
			}, 1000)
		},
		// 查询答题卡和菜单
		getExamPaperInfo() {
			let tiem = Date.parse(this.row.sessionEndTime) - Date.parse(this.row.currTime) // 获取时间差
			this.templatetiem = tiem / 1000 //时间戳转化为秒
			getExamPaper({
				examineeId: this.row.examineeId,
				sessionId: this.row.sessionId,
				paperId: this.row.paperId,
			}).then((res) => {
				console.log('!!!', res)
				this.studentMsg = res.examinee
				this.templatepape = res
				for (let i = 0; i < res.paper.structureList.length; i++) {
					res.paper.structureList[i].index = i + 1
					//处理大题内部的填空题
					if (res.paper.structureList[i].beanName == 'bigQuestionServiceImpl') {
						for (let j = 0; j < res.paper.structureList[i].bankList[0].bankList.length; j++) {
							if (
								res.paper.structureList[i].bankList[0].bankList[j].beanName ==
								'completionServiceImpl'
							) {
								if (res.paper.structureList[i].bankList[0].bankList[j].examAnswer.value != null) {
									res.paper.structureList[i].bankList[0].bankList[j].examAnswer.value =
										res.paper.structureList[i].bankList[0].bankList[j].examAnswer.value.split('^^')
								}
							}
						}
					} else if (res.paper.structureList[i].beanName == 'multipleChoiceServiceImpl') {
						res.paper.structureList[i] = this.regMuch(res.paper.structureList[i])
					} else if (res.paper.structureList[i].beanName == 'completionServiceImpl') {
						res.paper.structureList[i] = this.regbank(res.paper.structureList[i])
					} else if (res.paper.structureList[i].beanName == 'bankedClozeServiceImpl') {
						//选词填空题
						res.paper.structureList[i] = this.choiceSelect(res.paper.structureList[i])
					}
					for (let k = 0; k < res.paper.structureList[i].bankList.length; k++) {
						res.paper.structureList[i].bankList[k].index = k + 1
					}
				}
				this.paper = res.paper
				console.log('答题卡： *************', this.paper)
				//  this.breadcrumb.type=this.paper.structureList[0].type
			})
		},
		//处理填空
		regbank(arr) {
			for (let i = 0; i < arr.bankList.length; i++) {
				if (arr.bankList[i].examAnswer.value != null) {
					arr.bankList[i].examAnswer.value = arr.bankList[i].examAnswer.value.split('^^')
				}
			}
			return arr
		},
		// 处理选词填空
		choiceSelect(arr) {
			let length = arr.bankList.length
			console.log('选词填空：', arr)
			for (let i = 0; i < length; i++) {
				if (arr.bankList[i].examAnswer.value != null) {
					arr.bankList[i].examAnswer.value = arr.bankList[i].examAnswer.value.split('^^')
				}
			}
			return arr
		},
		//   处理多选
		regMuch(arr) {
			for (let i = 0; i < arr.bankList.length; i++) {
				if (arr.bankList[i].examAnswer.value != null) {
					arr.bankList[i].examAnswer.value = arr.bankList[i].examAnswer.value.split('^^')
					// 循环选项
					for (let k = 0; k < arr.bankList[i].options.length; k++) {
						// 选项已选
						for (let j = 0; j < arr.bankList[i].examAnswer.value.length; j++) {
							if (arr.bankList[i].examAnswer.value[j] == arr.bankList[i].options[k].context) {
								arr.bankList[i].options[k].flag = true
								break
							} else {
								arr.bankList[i].options[k].flag = false
							}
						}
					}
				}
			}
			return arr
		},
	},

	destroyed() {
		clearInterval(this.timer) // 组件销毁时清除定时器
	},
}
</script>
<style scoped lang="scss">
div {
	box-sizing: border-box;
}
.datika-dialog::v-deep {
	.el-dialog--center {
		height: calc(100% - 20px);
		overflow: hidden;
		margin-top: 10px !important;
		.el-dialog__header {
			display: none;
		}
		.el-dialog__body {
			padding: 15px;
			height: 100%;
			overflow: auto;
			.studentmsg-ietm {
				font-size: 16px;
				flex-wrap: wrap;
				> div {
					min-width: 50%;
					.tips {
						display: inline-block;
						min-width: 90px;
						text-align: right;
						font-weight: bold;
					}
				}
			}
		}
	}
}
.container {
	display: flex !important;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #eee;
}
.el-header {
	background-color: #b3c0d1;
	color: #333;
	line-height: 60px;
}

.el-aside {
	width: 100% !important;
	padding: 10px;
	color: #333;
}
.menu {
	display: block;
	width: 90%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.menu_list {
	display: flex;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.button {
	margin-top: 20px;
	font-size: 20px;
	width: 120px;
	height: 50px;
	border-radius: 30px;
}
.msgInfo_page {
	flex: 1;
	height: calc(100% - 20px);
	margin: 10px 10px 10px 0;
	overflow-y: auto;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 1px 1px 6px #ccc;
	.el-container {
		.el-main {
			overflow: hidden;
			padding: 0;
		}
	}
}
.subbutton {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	padding-top: 20px;
	padding-bottom: 20px;
	align-items: center;
	background-color: #fff;
	padding: 10px;
	.el-button {
		height: 40px;
		width: 100%;
	}
}
.studentforn {
	width: 100%;
	height: 40px;
	background-color: #00cdcd;
	margin-bottom: 10px;
	font-size: 18px;
	color: #fff;
}
.box-card {
	margin-bottom: 20px;
	width: 100%;
}
.img {
	text-align: center;
	img {
		border: 2px solid #e4e7ed;
		width: 150px;
		height: 150px;
	}
}
.timeclick {
	height: 60px;
	overflow: hidden;
	border: 1px solid #e4e7ed;
	background-color: #fff;
	margin-bottom: 10px;
	text-align: center;
	font-size: 40px;
	font-weight: 600;
	border-radius: 5px;
	margin-bottom: 10px;
}
.spantime {
	display: block;
	margin: 10px 10px;
	.el-icon-bell {
		margin-right: 15px;
	}
	/* background-color: blue; */
}
.el-header {
	background-color: #b3c0d1;
	color: #333;
	line-height: 60px;
}
.header {
	text-align: right;
	font-size: 18px;
	line-height: 60px;
}
.ansekahead {
	font-size: 24px;
	font-weight: 600;
	text-align: center;
}
.studentmsg {
	margin-top: 20px;
	font-size: 18px;
}
.studentmsg-ietm {
	padding: 10px 10px;
	display: flex;
	justify-content: space-between;
}
.quest {
	border: 1px solid #dcdfe6;
	display: flex;
	width: 25%;
	.quest_span {
		display: flex;
		align-items: center;
		text-align: center;
		line-height: 40px;
		height: 40px;
		font-weight: 600;
		margin-left: 5px;
		.el-radio-group {
			display: flex;
			align-items: center;
		}
	}
}
.tagChoice {
	// background-color: red;
	color: red;
}
.bankquest {
	// background-color: pink;
	border-bottom: 1px solid #dcdfe6;
	display: flex;
	width: 100%;
	.bankquest_span {
		// display: flex;
		text-align: center;
		line-height: 40px;
		height: 40px;
		font-weight: 600;
		margin-right: 20px;
		margin-left: 5px;
		vertical-align: bottom;
		.span {
			margin-left: 10px;
		}
	}
}

.bankquest_choice {
	border-bottom: 1px solid #dcdfe6;
	display: flex;
	width: 100%;
	.bankquest_span_choice {
		display: flex;
		flex-wrap: wrap;
		font-weight: 600;
		margin-right: 20px;
		margin-left: 5px;
		.div {
			margin-left: 10px;
		}
	}
}

.quest-item {
	display: block;
	background-color: #c0c4cc;
	padding-bottom: 3px;
	margin: 5px;
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	width: 30px;
	height: 30px;
	font-weight: 600;
}
.quest-item-right {
	display: block;
	background-color: #67c23a;
	padding-bottom: 3px;
	margin: 5px;
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	width: 30px;
	height: 30px;
	font-weight: 600;
}
.ansekahead-chose {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
	font-size: 18px;
}
.bigansekahead-chose {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
	font-size: 18px;
	border: 2px solid #e4e7ed;
}
.msgInfo {
	width: 300px;
	height: 100%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	background: #eee;
	.sidePosi {
		overflow-y: auto;
		flex: 1;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}
	::v-deep .el-menu {
		margin-bottom: 0px;
		flex: 1;
		width: 100%;
		overflow-y: auto;
	}
}
</style>
